<!--
 * @Description: 动态举报
 * @version: 电子名片2.0
 * @Author: 尹鑫
 * @Date: 2020-12-02 09:31:17
 * @LastEditors: 尹鑫
 * @LastEditTime: 2020-12-16 10:25:50
-->
<template>
  <div class="mainbox">
    <adminTable ref="refTable" :form-inline="formInline" :api-fun="reportList3" :table-column="tableColumn" :table-data.sync="tableData" :reset-fun="resetFrom">
      <!-- 搜索插槽 -->
      <template slot="search">
        <el-form-item>
          <el-input v-model="formInline.reportId" placeholder="举报编号" clearable />
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.reportReason" placeholder="举报原因">
            <el-option v-for="(item, index) in reportReasonList" :key="index" :label="item.settingsName" :value="item.settingsId" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.reportStatus" placeholder="状态">
            <el-option v-for="(item, index) in stateList" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </template>
      <!-- 状态插槽 -->
      <template slot="reportStatus" slot-scope="scope">
        <span v-if="scope.value.reportStatus === '0'" style="color: #F56C6C">待审核</span>
        <span v-else-if="scope.value.reportStatus === '1'" style="color: #67C23A">已同意</span>
        <span v-else style="color: #909399;">已拒绝</span>
      </template>
      <!-- 操作插槽 -->
      <template slot="operat" slot-scope="scope">
        <el-button v-if="scope.value.reportStatus === '0'" type="text" size="small" @click="handleClick(scope.value)">审核</el-button>
        <el-button type="text" size="small" @click="openReportDetailModal(scope.value)">举报详情</el-button>
      </template>
    </adminTable>
    <MessageBox ref="reportReviewModal" :title="'举报审核'" :content="'是否同意该举报？'" :confirm-text="'同意'" :cancel-text="'拒绝'" @confirm="confirmModal" @cancel="cancelModal" />
    <RejectModal :title="'举报审核'" :reason.sync="rejectReason" :show-reject-modal.sync="showRejectModal" @confire="submitReason" />
    <ReportDetailModal :show-details-modal.sync="showDetailsModal" :report-details="reportDetails" />
  </div>
</template>

<script>
import MessageBox from '@/components/MessageBox'
import RejectModal from '../components/RejectModal'
import adminTable from '@/components/admin/admin-table'
import ReportDetailModal from '../components/ReportDetailModal'
// 导入接口函数
import { reportList3, reportDetail, reportCheck, reportReasonList } from '@/api/report'
import { tableColumn, stateList } from './listConfig'
export default {
  components: {
    adminTable,
    MessageBox,
    RejectModal,
    ReportDetailModal
  },
  data() {
    return {
      tableColumn,
      tableData: [],
      formInline: {
        reportId: '',
        reportReason: '',
        reportStatus: '',
        type: '4'
      },
      rejectReason: '',
      stateList,
      reportReasonList: [],
      // 接口函数
      reportList3,
      showRejectModal: false,
      showDetailsModal: false,
      reportDetails: {},
      reportId: ''
    }
  },
  mounted() {
    this.getReasonList()
  },
  methods: {
    // 获取举报详情
    async getReasonList() {
      const { data } = await reportReasonList({
        type: '1',
        keyword: ''
      })
      this.reportReasonList = data
    },
    // 审核操作
    handleClick(e) {
      this.reportId = e.reportId
      this.$refs.reportReviewModal.open(e)
    },
    // 同意审核接口请求
    async confirmModal(v) {
      const { code } = await reportCheck({
        bizId: v.reportId,
        freeze: true,
        reason: '',
        state: '1'
      })
      if (code === 0) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.$refs.refTable.getList()
      } else {
        this.$message.error('操作失败')
      }
    },
    // 拒绝审核操作
    cancelModal(e, action) {
      // 当动作为拒绝时才打开另外一个模态框
      if (action === 'cancel') {
        this.showRejectModal = true
      }
    },
    // 提交拒绝理由
    async submitReason(e) {
      const { code } = await reportCheck({
        bizId: this.reportId,
        freeze: false,
        reason: e,
        state: '0'
      })
      if (code === 0) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.$refs.refTable.getList()
      } else {
        this.$message.error('操作失败')
      }
    },
    // 获取举报详情数据
    async openReportDetailModal(e) {
      const { data } = await reportDetail(e)
      data.reportPicture = data.reportPicture.split(',')
      this.reportDetails = data
      this.showDetailsModal = true
    },
    // 重置表单
    resetFrom() {
      this.formInline.reportId = ''
      this.formInline.reportReason = ''
      this.formInline.reportStatus = ''
      this.formInline.type = '4'
      return true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
